<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制定生产派工单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        .layui-form-label {
            color: #000000;
        }

        .layui-input {
            width: 200px;
        }

        .remark {
            width: 524px;
        }

        .form-padding {
            padding-top: 20px;
        }

        .button-info {
            position: absolute;
            left: 304px;
            bottom: 35px;
        }

        .make-erver {
            margin-top: -4px;
        }
    </style>
</head>
<body>


<div class="layuimini-container">
    <div class="layuimini-main">
        <table class="layui-hide" id="test" lay-filter="test"></table>

    </div>
</div>

<div style="display: none" id="diaLogOpen">
    <form class="layui-form form-padding" lay-filter="DataFrm" id="DataFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">计划单编号</label>
                <div class="layui-input-block">
                    <input style="display: none" type="text" name="id" readonly="readonly"  lay-verify="required" placeholder="请输入计划单编号"
                           class="layui-input">
                    <input type="text" name="schedule_id" readonly="readonly"  lay-verify="required" placeholder="请输入计划单编号"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">出库单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="qutbound_order_id" readonly="readonly"  lay-verify="required" placeholder="请输入出库单编号"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">登记人</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="DengjiInput" readonly="readonly" lay-verify="title" autocomplete="off" placeholder="请输入登记人"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">登记时间</label>
                <div class="layui-input-block">

                    <input type="text" name="review_time" class="layui-input" id="test1" placeholder="请输入登记时间">

                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">产品编号</label>
                <div class="layui-input-block">
                    <input type="text" name="product_id" readonly="readonly" lay-verify="title" autocomplete="off" placeholder="请输入产品编号"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">产品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="product_name" readonly="readonly" lay-verify="required" placeholder="请输入产品名称"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <input type="text" name="product_describe" readonly="readonly" lay-verify="title"  placeholder="请输入描述"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">数量</label>
                <div class="layui-input-block">
                    <input type="text" name="quantity" readonly="readonly" lay-verify="required" placeholder="请输入数量"
                           class="layui-input">
                </div>
            </div>
        </div>
        <a class="layui-btn button-info" lay-submit="" lay-filter="addOrder" id="addOrder"><label
                class="layui-icon layui-icon-release"></label>提交</a>
    </form>
</div>

<script type="text/html" id="toolbarDemo2">
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal make-erver" lay-event="add">生成派工单</button>
    </div>
</script>

<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>

<script>

    let apiUrl = "http://localhost:8003/";
    let tableIns;
    let index;

    layui.use(['table', 'layer', 'form','laydate'], function () {
        let table = layui.table;
        let layer = layui.layer;
        let form = layui.form;
        let laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
            ,type: 'datetime'
        });

        tableIns = table.render({
            elem: '#test'
            , url: apiUrl+'production/getAllProduction_order'
            , page: true
            , toolbar: '#toolbarDemo2' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , cols: [[
                {type: 'checkbox'}
                , {field: 'id', align: 'center', title: 'id',hide:true}
                , {field: 'schedule_id', align: 'center', title: '计划单编号'}
                , {field: 'product_id', title: '产品编号'}
                , {field: 'product_name', title: '产品名称'}
                , {field: 'product_describe', title: '描述'}
                , {field: 'quantity', title: '数量'}
                , {field: 'qutbound_order_id', title: '出库单编号'}
                , {field: 'review_time', title: '制定时间'}
                , {title: '操作', templet: '#toolbarDemo', fixed: "right", align: "center"}
            ]]
        });

        //监听工具条
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            console.log(data);
            if (obj.event === 'add') {
                //页面层
                index = layer.open({
                    type: 1,
                    title: '制定派工单',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['700px', '450px'], //宽高
                    content: $("#diaLogOpen")
                    , success: function (layero) {
                        form.val('DataFrm',data);

                        let user =  JSON.parse(window.localStorage.getItem("user"));
                        // 登记人
                        $("#DengjiInput").val(user.name);
                    }
                });
            }
        });

        $("#addOrder").click(function () {
            var params = $("#DataFrm").serialize();
            $.post(apiUrl+'production/updateProductionOrderById', params, function (res) {

                layer.msg(res);
                if (res.code == 200) {
                    tableIns.reload();
                }
                layer.close(index);
            });
            return false;
        });
        /*//提交数据
        form.on("submit(addOrder)", function (data) {
            var params = $("#DataFrm").serialize();
            console.log(params);
            $.post(apiUrl+'production/updateProductionOrderById', params, function (res) {

                layer.msg(res);
                if (res.code == 200) {
                    tableIns.reload();
                }
               layer.close(index);
            });
            return false;
        });*/

    });



</script>

</body>
</html>